let canvas , context;
let canvasWidth = canvasHeight=300;//画布高宽
const yuan = 2 * Math.PI;//一个圆的弧度
let r = canvasWidth/2/5*4;  //中心点距离,钟表的半径
let centerP = { x: canvasWidth/2, y: canvasHeight/2 };  //中心点坐标
let angle = - (yuan / 4);//偏转角度   
let showTime = {hh:0,mm:0,ss:0};//显示的时间   
//初始化
function init(){
    let now = new Date();
    showTime = {hh:now.getHours()%12,mm:now.getMinutes(), ss:now.getSeconds()};
    
    canvas = document.querySelector("#canvas");
    canvas.width = canvasWidth;
    canvas.height = canvasHeight;
    context = canvas.getContext("2d");
}
//绘制直线
function drawLine(startPoint,endPoint,borderStyle={width:1,color:"black"}){
    context.beginPath(); 
    context.moveTo(startPoint.x,startPoint.y);    
    context.lineTo(endPoint.x,endPoint.y);
    context.closePath();

    context.lineWidth=borderStyle.width;
    context.strokeStyle=borderStyle.color;
    context.stroke(); 
}
//绘制表盘
function drawClockDial(){
    let color="#FD971F";//表盘颜色
    //中心点
    context.beginPath();    
    context.arc(centerP.x,centerP.y,6,0,yuan);
    context.closePath();
    context.fillStyle=color;
    context.fill();

    //外圈
    context.beginPath();    
    context.arc(centerP.x,centerP.y,r,0,yuan);
    context.closePath();
    context.lineWidth=2;
    context.strokeStyle=color;
    context.stroke(); 
    //小时刻度
    let len = 10;
    let width = 5;
    for(let i=0; i<12; i++){  
        let p1 = {x:r*Math.cos(yuan/12*i)+centerP.x  ,  y : r*Math.sin(yuan/12*i)+centerP.y}; 
        let p2 = {x:(r-len)*Math.cos(yuan/12*i)+centerP.x, y:(r-len)*Math.sin(yuan/12*i)+centerP.y};
        drawLine(p1,p2,{width,color});  
    }
    //分钟刻度
    len = 6;
    width = 2;
    for(let i=0; i<60; i++){  
        if(i%5!=0){
            let p1 = {x:r*Math.cos(yuan/60*i)+centerP.x  ,  y : r*Math.sin(yuan/60*i)+centerP.y}; 
            let p2 = {x:(r-len)*Math.cos(yuan/60*i)+centerP.x, y:(r-len)*Math.sin(yuan/60*i)+centerP.y};
            drawLine(p1,p2,{width,color});  
        }
    }    
}
//绘制时，分，秒针
function drawPointer(){
    let width = 6;
    let  color= "#FD971F";
    let curHours = showTime.hh;
    let curMitnues = showTime.mm;
    let curSeconds = showTime.ss;
    let deg = curHours/12*yuan+(curMitnues/60*yuan/12)+(curSeconds/60*yuan/60/60)+angle;
    let hhP = {            
            x:(r/10*6)*Math.cos(deg)+centerP.x,
            y:(r/10*6)*Math.sin(deg)+centerP.y
        };
    deg = yuan/60*curMitnues+(curSeconds/60*yuan/60)+angle;
    let mmP = {
        x:(r/10*7.5)*Math.cos(deg)+centerP.x,
         y:(r/10*7.5)*Math.sin(deg)+centerP.y
        };
    deg = yuan/60*curSeconds+angle;    
    ssP = {
        x:(r/10*9)*Math.cos(deg)+centerP.x, 
        y:(r/10*9)*Math.sin(deg)+centerP.y
    };
     //时针   
    width = 6;
     drawLine(centerP,hhP,{width:width,color:color});  
     //分针
     width = 4;
      drawLine(centerP,mmP,{width,color});  
     //秒针
     width =2;
      drawLine(centerP,ssP,{width,color}); 
}
//渲染
function render(){
    drawClockDial();//绘制表盘
    drawPointer();  //绘制指针
}
//更新数据
function update(){
    let curTime= new Date();
    showTime = {
        hh:curTime.getHours()%12,
        mm:curTime.getMinutes(), 
        ss:curTime.getSeconds()
    };

    document.querySelector("#timer").innerText=showTime.hh+":"+showTime.mm+":"+showTime.ss;
}
//清空画布
function clear(){
    context.clearRect(0,0,canvasWidth, canvasHeight);
}
window.onload = function(){
    init();


     setInterval(()=>{
        clear();        
        render();
        update();
        
    },60);
}

